import React from 'react';
import { useTranslation } from 'react-i18next';
import { 
  IonItem, 
  IonLabel, 
  IonSelect, 
  IonSelectOption 
} from '@ionic/react';

const LanguageSwitcher: React.FC = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <IonItem>
      <IonLabel>{i18n.t('language')}</IonLabel>
      <IonSelect
        value={i18n.language}
        placeholder="Select Language"
        onIonChange={(e) => changeLanguage(e.detail.value)}
      >
        <IonSelectOption value="en">English</IonSelectOption>
        <IonSelectOption value="zh">中文</IonSelectOption>
        <IonSelectOption value="es">Español</IonSelectOption>
      </IonSelect>
    </IonItem>
  );
};

export default LanguageSwitcher;